<template>
    <div class="photoinfo-container">
        <!--大标题-->
        <h3 class="title">{{photoinfo.title}}</h3>
        <!--子标题-->
        <p class="subtitle">
            <span>发表时间：{{photoinfo.add_time | dateFormat}}</span>
            <span>点击：{{photoinfo.click}}次</span>
        </p>
        <hr>
        <!--缩略图区域-->
        <div class="thumbs">
            <vue-preview :slides="list"></vue-preview>
        </div>

        <!--图片内容区-->
        <div class="content" v-html="photoinfo.content"></div>
        <!--评论子组件区域-->
        <cmt-box :id="this.id"></cmt-box>
    </div>
</template>

<script>
    import comment from '../subcomponents/comment.vue'

    export default {
        data() {
            return {
                id: this.$route.params.id,//从路由中获取到的id
                photoinfo: {},//图片详情
                list: []//缩略图的数组
            }
        },
        created() {
            this.getPhotoInfo();
            this.getThumbs();
        },
        methods: {
            getPhotoInfo() {//获取图片详情
                this.$http.get('getImgInfo/' + this.id + '.json').then(result => {
                    if (result.body.status === 0) {
                        this.photoinfo = result.body.message[0];
                    } else {
                        Toast("获取新闻失败！")
                    }
                })
            },
            getThumbs() {//获取缩略图
                this.$http.get('getThumbImages/' + this.id + '.json').then(result => {
                    if (result.body.status === 0) {
                        //循环每个图片数据，补全图片的宽和高
                        result.body.message.forEach(item => {
                            item.w = 600;
                            item.h = 400;
                        });
                        //把完整的数据保存到list 中
                        this.list = result.body.message;
                    } else {
                        Toast("获取新闻失败！")
                    }
                })

            }
        },
        components: {//用来注册子组件的节点
            'cmt-box': comment
        }
    }
</script>

<style lang="scss" >
    .photoinfo-container {
        padding: 0 5px;
        .title {
            font-size: 16px;
            text-align: center;
            margin: 15px 0;
            color: #26a2ff;
        }
        .subtitle {
            font-size: 12px;
            display: flex;
            justify-content: space-between;
        }
        .content {
            font-size: 14px;
            line-height: 30px;
        }
        .thumbs {
            display: flex;
            div {
                width: 100%;
            }
            .my-gallery {
                display: flex;
                flex-wrap: wrap;
                figure {
                    margin: 10px;
                    box-shadow: 0 0 10px #999;
                    img {
                        width: 80px;
                        height: 80px;
                        vertical-align: middle;
                    }
                }
            }
        }
    }
</style>
